<template>
  <section class="home-page">
    <div class="search-box">
      <div class="search-action ling-flex">
        <van-field v-model="searchData" center clearable placeholder="请填写关键词" maxlength="10">
          <span slot="left-icon">
            <img width="12" :src="glassImage" />
          </span>
        </van-field>
        <div slot="button" class="search-btn" @click="handleSearch">搜索</div>
      </div>
      <div class="filter-items">
        <span class="ling-pinkButton" @click="handleUpdateIndustryInfo">
          <i v-if="industry.text">{{ industry.text }}</i>
          <i v-else>行业</i>
        </span>
        <van-icon class="filter-items-icons" name="arrow-down" />
        <span class="ling-pinkButton" @click="handleUpdateJobsInfo">
          <i v-if="jobs.text">{{ jobs.text }}</i>
          <i v-else>项目内容</i>
        </span>
        <van-icon class="filter-items-icons" name="arrow-down" />
      </div>

      <Picker
        @sendToParent="changeStatus"
        :title="industryTit"
        :status="industryStatus"
        :columns="industryList"
      />
      <Picker
        @sendToParent="changeStatus"
        :title="jobsTit"
        :status="jobsStatus"
        :columns="industryPositionList"
      />
    </div>

    <div v-if="allJob.length > 0" style="margin-bottom: 64px">
      <div
        class="result-list"
        v-for="item in allJob"
        :key="item.id"
        @click="checkJobDetail(item.id)"
      >
        <div class="result-list-items">
          <div class="van-ellipsis result-list-tit">{{ item.title }}</div>
          <time>{{ item.createTime | datefmt('YYYY-MM-DD HH:mm') }}</time>
        </div>
        <div class="result-list-items">
          <div class="result-list-jobs van-ellipsis">
            <img width="20" :src="jobsImage" />
            {{ item.industryName }} {{ item.positionName }}
          </div>
          <span class="van-ellipsis money">
            {{ item.budgetInfo }}
            <van-icon class="filter-items-icons" name="arrow" />
          </span>
        </div>
        <div class="result-list-items">
          <div class="van-ellipsis result-list-company">
            <img width="20" :src="jobsImage" />
            {{ item.companyName }}
          </div>
          <span class="status-msg">
            {{
            item.auditStatus == 'AUDITED' ? '资质已审核' : item.auditStatusDesc
            }}
          </span>
        </div>
      </div>
    </div>
    <div v-else class="no-task">暂无相关任务</div>
  </section>
</template>

<script>
import Picker from '@/components/Picker'
import jobsImage from '@/assets/images/jobs.png'
import glassImage from '@/assets/images/glass.png'
import {
  createNamespacedHelpers,
  mapState as rootState,
  mapActions as rootActions,
} from 'vuex'
const {
  mapState: myDataMapState,
  mapActions: myDataMapActions,
} = createNamespacedHelpers('myData')
import { getAccessToken, getIdentity } from '@/utils/userAuth'

export default {
  name: 'HomePage',
  data() {
    return {
      jobsImage,
      glassImage,
      searchData: '',
      isShow: false,
      industryTit: 'industry',
      jobsTit: 'jobs',
      industryStatus: false,
      jobsStatus: false,
      industry: {
        id: '',
        text: '',
      },
      jobs: {
        id: '',
        text: '',
      },
      accessToken: getAccessToken(),
    }
  },
  components: {
    Picker,
  },
  computed: {
    ...rootState(['industryList', 'industryPositionList', 'allJob']),
    ...myDataMapState(['companyUserDetail']),
  },
  beforeCreate() {
    // 暂时分享url会有bug，后期优化再作考虑
    const { companyName } = this.$router.history.current.query
    // console.log('companyName: ', companyName);
    const sessionCompanyName = sessionStorage.getItem('companyName')
    // console.log('sessionCompanyName: ', sessionCompanyName)
    if (!companyName && !sessionCompanyName) return
    sessionStorage.setItem('companyName', companyName || sessionCompanyName)
  },
  async created() {
    // console.log(this.allJob,'this.allJob')
    this.getIndustryList()

    if (getIdentity() == 'company') {
      this.handleSearchAccountAllJob()
      this.getCompanyUserDetail()
    }
    if (getIdentity() == 'user') {
      this.handleSearchAllJob()
      this.getUserDetail()
    }
  },
  methods: {
    ...rootActions([
      'getIndustryList',
      'getIndustryPositionList',
      'searchAllJob',
      'searchAccountAllJob',
    ]),
    ...myDataMapActions(['getCompanyUserDetail', 'getUserDetail']),
    handleUpdateIndustryInfo() {
      this.industryStatus = true
    },
    handleUpdateJobsInfo() {
      this.jobsStatus = true
      this.getIndustryPositionList(this.industry.id)
    },
    changeStatus(msg) {
      switch (msg.title) {
        case 'industry':
          this.industryStatus = msg.status
          if (msg.value) {
            this.industry = msg.value
            this.jobs = {}
            this.handleSearch()
          }
          break
        case 'jobs':
          this.jobsStatus = msg.status
          if (msg.value) {
            this.jobs = msg.value
            this.handleSearch()
          }
        default:
      }
    },
    handleSearch() {
      if (getIdentity() == 'user') {
        this.handleSearchAllJob()
      } else {
        this.handleSearchAccountAllJob()
      }
    },
    handleSearchAllJob() {
      this.searchAllJob({
        industryId: this.industry.id,
        positionId: this.jobs.id,
        title: this.searchData,
      })
    },
    handleSearchAccountAllJob() {
      this.searchAccountAllJob({
        industryId: this.industry.id,
        positionId: this.jobs.id,
        title: this.searchData,
      })
    },

    checkJobDetail(jobId) {
      this.$router.push(`jobDetail/${jobId}`)
    },
  },
}
</script>

<style lang='less' scoped>
.search-box {
  background: white;
  padding: 10px 4px;
  margin-bottom: 10px;
  .search-action {
    margin-top: 10px;
    padding: 0 15px 10px;
    .search-btn {
      width: 36px;
      color: #7ac5ef;
      font-size: 14px;
      text-align: right;
    }
  }
  .filter-items {
    margin-left: 15px;
    span {
      color: #7ac5ef;
      background: rgba(122, 197, 239, 0.2);
    }
    .filter-items-icons {
      margin: 0 20px 0 10px;
      position: relative;
      top: 2px;
      font-size: 10px;
      color: #7ac5ef;
    }
  }
}
.result-list {
  background: white;
  padding: 5px 20px;
  margin-bottom: 10px;
  .result-list-items {
    display: flex;
    justify-content: space-between;
    line-height: 30px;
    .result-list-tit {
      width: 180px;
      color: #333;
      font-size: 14px;
    }
    time {
      font-size: 12px;
      color: #999;
    }
    .money {
      width: 150px;
      font-size: 14px;
      color: #7ac5ef;
      text-align: right;
      .filter-items-icons {
        font-size: 10px;
        color: #666666;
        position: relative;
        right: -3px;
      }
    }
    .status-msg {
      height: 24px;
      line-height: 24px;
      color: #77da9d;
      font-size: 10px;
      background: rgba(119, 218, 157, 0.2);
      padding: 0 10px;
    }
    .result-list-jobs,
    .result-list-company {
      width: 180px;
      color: #999;
      font-size: 10px;
      img {
        margin-right: 10px;
      }
    }
  }
}
</style>

<style lang='less'>
.home-page {
  .search-box {
    .van-cell--center {
      border-bottom: solid 1px #dddddd;
    }
    .van-cell {
      padding: 0;
    }
    .van-cell:not(:last-child)::after {
      border-bottom: none;
    }
  }
}
</style>